//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：myFundHistory.js
// 创建时间：2017年06月04日
// 创建人员：Lemo
// 功能说明：myFundHistory page
//################################
'use strict';

import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    Dimensions,
    ActivityIndicator,
    TouchableOpacity,
    InteractionManager
} from 'react-native';

import {
    UIConstants,
    Colors,
    FontSizes,
    CommonData,
    CommonFunc
} from '../../common';

import Images from '../../images';
import * as ActionTypes from '../../actions/types';
import GiftedListView from '../../components/pandaListView';
import {getFundHistory} from '../../actions';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;
const COUNT = 10;   //每页条数

class MyFundHistory extends Component {
    constructor(props) {
        super(props);

        this.onBackPress = this.onBackPressFunc.bind(this);
        this.renderRow = this.renderRowFunc.bind(this);
        this.onFetch = this.onFetchFunc.bind(this);
        this.renderPaginationFetchigView = this.renderPaginationFetchigViewFunc.bind(this);
        this.renderPaginationAllLoadedView = this.renderPaginationAllLoadedViewFunc.bind(this);
        this.renderPaginationWaitingView = this.renderPaginationWaitingViewFunc.bind(this);
        this.renderEmptyView = this.renderEmptyViewFunc.bind(this);

    }

    componentWillReceiveProps(nextProps) {
        switch (nextProps.actionType) {
            case ActionTypes.MY_FUNDHISTORY_SUCCESS:
                this._getListSuccess(nextProps.fundhistorylist);
                break;
            case ActionTypes.MY_FUNDHISTORY_FAILED:
                this.listView && this.listView._updateRows(null);
                this.errorHandler(nextProps.fundhistoryerrormsg);
                break;
            default:
                break;
        }
    }

    _getListSuccess(listdata) {
        let newList = listdata.data;
        if (CommonFunc.isEmpty(newList)) {
            this.callback && this.callback([]);
        } else {
            let isAllLoaded = false;
            if (this.currentPageNum === listdata.pageCount) {
                isAllLoaded = true;
            }
            if (this.currentPageNum === 1) {
                this.listView._updateRows(newList, {allLoaded: isAllLoaded});
            } else {
                this.callback && this.callback(newList, {allLoaded: isAllLoaded});
            }
        }
    }

    onBackPressFunc() {
        const {navigatorRoot} = this.props;
        InteractionManager.runAfterInteractions(() => {
            navigatorRoot.pop();
        });
    }

    renderRowFunc(rowData) {
        return (
            <View style={styles.itemrow}>
                <View>
                    <Text style = {styles.renderrowtext} numberOfLines={1}>{rowData.date}</Text>
                </View>
                <View style={{flexDirection:'row',marginTop:5,alignItems:'center'}}>
                    <View>
                        <Text style = {styles.renderrowtext} numberOfLines={1}>{rowData.type}</Text>
                    </View>
                    <View style={{marginLeft:5}}>
                        <Text style = {[styles.renderrowtext,{fontSize:18,color:'#CDCD00'}]} numberOfLines={1}>{rowData.num}</Text>
                    </View>
                    <View style={{marginLeft:5}}>
                        <Text style = {styles.renderrowtext}>{'GZB'}</Text>
                    </View>
                    <View style={{marginLeft:30}}>
                        <Text style = {styles.renderrowtext} numberOfLines={1}>{'摘要：'}{rowData.content}</Text>
                    </View>
                </View>
            </View>
        );
    }

    onFetchFunc(page = 1, callback, options) {
        this.callback = callback;
        this.currentPageNum = page;
        setTimeout(() => {
            const {dispatch} = this.props;
            dispatch(getFundHistory(CommonData.userId, page, COUNT));
        }, 500);
    }

    renderPaginationFetchigViewFunc() {
        return (
            <View style={customStyles.defaultView}>
                <ActivityIndicator
                    animating={true}
                    style={{height: 80,marginTop:50}}
                    color="#37B9D0"
                    size="large"
                />
            </View>
        );
    }
    
	renderPaginationAllLoadedViewFunc() {
		return (
		    <View style={customStyles.paginationView}>
				<Text style={[customStyles.actionsLabel, {fontSize:14}]}>
                    {'无更多数据'}
				</Text>
			</View>
		);
  	}
    
    renderPaginationWaitingViewFunc(paginateCallback) {
		return (
			<TouchableOpacity
				onPress={paginateCallback}
				style={customStyles.paginationView}>
				<Text style={[customStyles.actionsLabel, {fontSize:14}]}>
					{'加载更多'}
				</Text>
			</TouchableOpacity>
		);
  	}
    
    renderEmptyViewFunc(refreshCallback) {
        return (
            <View style={customStyles.defaultView}>
                <Text style={customStyles.defaultViewTitle}>
                    {'暂无数据'}
                </Text>
            </View>
        );
    }

    errorHandler(msg) {
        toastTip(msg, 'long');
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.headers}>
                    <TouchableOpacity style={styles.headerback} onPress={this.onBackPress}>
                        <Image source={Images.Back} style={styles.headerbackicon} resizeMode={Image.resizeMode.contain} />
                        <Text style={styles.headerbacktext}>{UIConstants.my.back}</Text>
                    </TouchableOpacity>
                    <Text style={styles.headertext} numberOfLines={1}>
                       {'资金历史'}
                    </Text>
                    <TouchableOpacity style={styles.headerback} disabled={true}>
                        <Image source={Images.Back} style={[styles.headerbackicon, {opacity: 0}]} resizeMode={Image.resizeMode.contain} />
                        <Text style={[styles.headerbacktext,{opacity: 0}]}>{UIConstants.my.back}</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.fundinfo}>
                    <View><Text>{'目前鸽子币（GZB）：'}</Text></View>
                    <View><Text style={{fontSize:18,color:'#CDCD00'}}>{'120'}</Text></View>
                </View>

                <View style={{height:WINDOW_HEIGHT-110}}>
                    <GiftedListView
                        ref={(ref) => {this.listView = ref}}
                        rowView={this.renderRow}
                        onFetch={this.onFetch}
                        initialListSize={10} // the maximum number of rows displayable without scrolling (height of the listview / height of row)
                        firstLoader={true} // display a loader for the first fetching
                        pagination={true} // enable infinite scrolling using touch to load more
                        paginationFetchingView={this.renderPaginationFetchigView}
                        paginationAllLoadedView={this.renderPaginationAllLoadedView}
                        paginationWaitingView={this.renderPaginationWaitingView}
                        refreshable={false} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                        emptyView={this.renderEmptyView}
                    />
                </View>
            </View>
        );
    }
}

var customStyles = {
    separator: {
        backgroundColor: '#CCC',
        height: 1,
    },
    actionsLabel: {
        fontSize: 20,
        color: '#C9C9C9',
    },
    paginationView: {
        width: WINDOW_WIDTH,
        height: 44,
        justifyContent: 'center',
        alignItems: 'center',
    },
    defaultView: {
        width: WINDOW_WIDTH,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    defaultViewTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 15,
    },
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F8F8F8',
    },
    headers: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomWidth: 0.5,
        borderBottomColor: Colors.gray,
        backgroundColor: Colors.appHeaderBackground,
    },
    headertext: {
        flex: 1,
        fontSize: FontSizes.soiHeader,
        color: Colors.appHeaderText,
        textAlign: 'center',
        alignSelf: 'center',
        marginBottom: -12,
    },
    headerback: {
        flexDirection: 'row',
        marginBottom: -12,
        alignItems: 'center',
        padding: 8,
    },
    headerbackicon: {
        width: 20,
        height: 20,
    },
    headerbacktext: {
        fontSize: 17,
        color: Colors.appHeaderText,
    },
    fundinfo: {
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#FEFEFE',
        paddingLeft: 20,
        paddingRight: 20,
        borderBottomColor: Colors.mySplitter,
        borderBottomWidth: 0.4,
    },

    itemrow: {
        width: (WINDOW_WIDTH-20),
        marginLeft:10,
        marginTop: 10,
        padding: 10,
        backgroundColor: '#FEFEFE',
    },
    renderrowtext: {
        fontSize: 14,
    },
});

export default MyFundHistory;